<template>
  <div className="px-[2vw]">
    <div>
      <v-icon :icon="mdiChevronLeft" size="50" @click="router.back()" />
      <span>找人</span>
    </div>
    <v-text-field label="请输入用户名" v-model="serarch">
      <template v-slot:append>
        <v-icon :icon="mdiClose" @click="serarch = ''" />
      </template>
    </v-text-field>
    <div
      v-for="(item, index) in list"
      :key="index"
      className="w-full h-[10vh] flex px-[2vw] py-[1vh] box-border justify-between"
    >
      <div className="basis-1/6 flex items-center">
        <v-avatar :image="userInfo.getHeader(item.avatar) " size="40"></v-avatar>
      </div>
      <div className="basis-4/6">
        <div>
          <span>{{ item.username }}</span>
        </div>
        <div>
          <span>{{ sexMap.get(item.sex) }}</span>
        </div>
      </div>
      <div className="basis-1/6 flex items-center">
        <v-btn
          class="text-none"
          color="indigo-darken-3"
          variant="flat"
          block
          @click="router.push({ path: '/sendAdd', query: { uid: item.id } })"
        >
          添加
        </v-btn>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { fuzzyQueryByAddUser } from "@/api";
import { mdiChevronLeft, mdiClose } from "@mdi/js";
import { ref, watch } from "vue";
import { sexMap } from "@/utils/commonType";
import { useRouter } from "vue-router";
import { useUserInfoStore } from "@/store/userInfo";

const router = useRouter();

const serarch = ref<string>("");

const timeout = ref<number | null>(null);

const list = ref();

const userInfo = useUserInfoStore();

// 防抖
watch(serarch, () => {
  if (timeout.value) clearTimeout(timeout.value);
  timeout.value = setTimeout(async () => {
    if (serarch.value !== "") {
      list.value = await fuzzyQueryByAddUser(
        userInfo.user.id,
        serarch.value
      );
    }
  }, 1000);
});
</script>
